<html>
    <head>
        <title>input</title>
    </head>
    <body>
        <script>
            // input 

                   /*
                        一、概述

                                 单行输入框

                   */ 

                   /*
                        二、属性说明

                                            属性名	                    类型	        默认值	                 说明	
                                                                                                                                        平台差异说明
                                        1、value	                    String		                        输入框的初始内容	

                                        2、type	                        String	        text	            input 的类型 有效值	

                                        3、text-content-type	        String		                        文本区域的语义，根据类型自动填充 有效值	仅 App-nvue-iOS 支持

                                        4、password	                    Boolean	        false	            是否是密码类型	H5和App写此属性时，type失效

                                        5、placeholder	                String		                        输入框为空时占位符	

                                        6、placeholder-style	        String		                        指定 placeholder 的样式	

                                        7、placeholder-class	        String	   "input-placeholder"	    指定 placeholder 的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/	抖音小程序、飞书小程序、快手小程序不支持
                                        
                                        8、disabled	                    Boolean	        false	            是否禁用	
                                        
                                        9、maxlength	                Number	        140	                最大输入长度，设置为 -1 的时候不限制最大长度	
                                        
                                        10、cursor-spacing	            Number	        0	                指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离	App、微信小程序、百度小程序、QQ小程序、京东小程序
                                        
                                        11、focus	                    Boolean	        false	            获取焦点。	H5、App需要点击按钮获取焦点的，必须使用@touchend.prevent="onTap"阻止键盘收起默认事件才能获取焦点关于软键盘弹出的逻辑说明，小程序、nvue需使用组件的 focus()、blur() 方法控制焦点
                                        
                                        12、confirm-type	            String	        done	            设置键盘右下角按钮的文字，仅在 type="text" 时生效。有效值	微信小程序、App、H5、快手小程序、京东小程序
                                        
                                        13、confirm-hold	            Boolean	        false	            点击键盘右下角按钮时是否保持键盘不收起	App(3.3.7+)、H5 (3.3.7+)、微信小程序、支付宝小程序、百度小程序、QQ小程序、京东小程序
                                        
                                        14、cursor	                    Number		                        指定focus时的光标位置	
                                        
                                        15、cursor-color	            String		                        光标颜色	微信小程序 3.1.0+、H5(4.0+)、App-Vue(4.0+)
                                        
                                        16、selection-start	            Number	        -1	                光标起始位置，自动聚集时有效，需与selection-end搭配使用	
                                        
                                        17、selection-end	            Number	        -1	                光标结束位置，自动聚集时有效，需与selection-start搭配使用	
                                        
                                        18、adjust-position	            Boolean	        true	            键盘弹起时，是否自动上推页面	App-Android（vue 页面 softinputMode 为 adjustResize 时无效，使用 x5 内核时无效）、微信小程序、百度小程序、QQ小程序、京东小程序
                                        
                                        19、auto-blur	                Boolean	        false	            键盘收起时，是否自动失去焦点	App-Vue 3.0.0+
                                        
                                        20、ignoreCompositionEvent	    Boolean	        true	            是否忽略组件内对文本合成系统事件的处理。为 false 时将触发 compositionstart、compositionend、compositionupdate 事件，且在文本合成期间会触发 input 事件	App-vue (3.4.4+)、H5 (3.4.4+)、App-nvue不支持
                                        
                                        21、always-embed	            Boolean	        false	            强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效)	微信小程序 2.10.4+
                                        
                                        22、hold-keyboard	            Boolean	        false	            focus时，点击页面的时候不收起键盘	微信小程序 2.8.2+
                                        
                                        23、safe-password-cert-path	    String		                        安全键盘加密公钥的路径，只支持包内路径	微信小程序 2.18.0+
                                        
                                        24、safe-password-length	    Number		                        安全键盘输入密码长度	微信小程序 2.18.0+
                                        
                                        25、safe-password-time-stamp    Number		                        安全键盘加密时间戳	微信小程序 2.18.0+
                                        
                                        26、safe-password-nonce	        String		                        安全键盘加密盐值	微信小程序 2.18.0+
                                        
                                        27、safe-password-salt	        String		                        安全键盘计算 hash 盐值，若指定custom-hash 则无效	微信小程序 2.18.0+
                                        
                                        28、safe-password-custom-hash	String		                        安全键盘计算 hash 的算法表达式，如 md5(sha1('foo' + sha256(sm3(password + 'bar'))))	微信小程序 2.18.0+
                                        
                                        29、random-number	            Boolean	        false	            当 type 为 number, digit, idcard 数字键盘是否随机排列	支付宝小程序 1.9.0+
                                        
                                        30、controlled	                Boolean	        false	            是否为受控组件。为 true 时，value 内容会完全受 setData 控制	支付宝小程序 1.9.0+
                                    
                                        31、always-system	            Boolean	        false	            是否强制使用系统键盘和 Web-view 创建的 input 元素。为 true 时，confirm-type、confirm-hold 可能失效	支付宝小程序 2.7.3+
                                        
                                        32、inputmode	                String	        "text"	            是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。有效值	H5（3.6.16+）、App-vue（3.6.16+）
                                        
                            -------------以下为事件绑定属性-------------

                                        33、@input	                    EventHandle		                    当键盘输入时，触发input事件，event.detail = {value}	差异见下方 Tips
                                        
                                        34、@focus	                    EventHandle		                    输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度	仅微信小程序、京东小程序、App（2.2.3+） 、QQ小程序、快手小程序支持 height
                                        
                                        35、@blur	                    EventHandle		                    输入框失去焦点时触发，event.detail = {value: value}	
                                        
                                        36、@confirm	                EventHandle		                    点击完成按钮时触发，event.detail = {value: value}	
                                        
                                        37、@keyboardheightchange	    eventhandle		                    键盘高度发生变化的时候触发此事件，event.detail = {height: height, duration: duration}	微信小程序基础库2.7.0+、App 3.1.0+


                            ★、注意点

                                     ①、input 事件处理函数可以直接 return 一个字符串，将替换输入框的内容。仅微信小程序支持。

                                     ②、如果遇到 value 属性设置不生效的问题参考：组件属性设置不生效解决办法

                                     ③、input 组件上有默认的 min-height 样式，如果 min-height 的值大于 height 的值那么 height 样式无效。

                                     ③、微信小程序 cursor-color 属性在iOS下的格式为十六进制颜色值 #000000，安卓下只支持 default 和 green，Skyline 下无限制。

                                     ④、在web 和 app-plus vue 上ios自带键盘的智能标点功能会导致： 在type为 number、digit 时，连续输入两次.后，在第三次输入.时，会触发两次

                                        deleteContentBackward(删除)的输入外加一次 insertText为 ...(三个点)的输入。会导致变现异常，关闭智能标点功能后正常。

            */

            /*
                三、属性有效值
                
                
                                        <1>、type有效值

                                                                值	                说明	                            平台差异说明

                                                            1、text	            文本输入键盘	
                                                            
                                                            2、number	        数字输入键盘	                均支持，App平台、H5平台 3.1.22 以下版本 vue 页面在 iOS 平台显示的键盘包含负数和小数。

                                                            3、idcard	        身份证输入键盘	                微信、支付宝、百度、QQ小程序、快手小程序、京东小程序

                                                            4、digit	        带小数点的数字键盘	            均支持，App平台、H5平台 vue 页面在 iOS 平台显示的键盘包含负数（原生键盘不支持负号）。

                                                            5、tel	            电话输入键盘	

                                                            6、safe-password	密码安全输入键盘	                    微信小程序

                                                            7、nickname	        昵称输入键盘	                        微信小程序


                                                        ★、注意事项

                                                                    ①、小程序平台， number 类型只支持输入整数类型数字。微信开发工具上体现不出来效果，请使用甄姬预览。

                                                                    ②、如果需要输入浮点行数字，请使用 digit类型。

                                                                    ③、小程序端 input 在置焦时，会表现为原生控件，此时会层级变高。如需前端组加你遮盖 input ，需要让 input 失焦，或使用 cover-view等覆盖原生组件的方案。

                                                                    具体来讲，阿里小程序的 input 为 text 且聚焦状态时为原生控件；微信、头条、qq 所有input聚焦均为原生控件；

                                                                    百度小程序聚焦时仍然是非原生的。

                                                                    ④、input组件若不想弹出软键盘，可设置为disabled

           
                                        <2>、text-content-type 有效值

                                                            值                  说明

                                                            1、onTimeCode        一次性验证码，常用于
            

                                        <3>、confirm-type 有效值

                                                            弹出软键盘的右下角按钮的文字。

                                                                    值	        说明	                                                                平台差异说明
                                                                    1、send	    右下角按钮为“发送”	            微信、支付宝、百度小程序、快手小程序、京东小程序、app-nvue、app-vue和h5(2.9.9+，且要求设备webview内核Chrome81+、Safari13.7+)
                                                                    
                                                                    2、search	右下角按钮为“搜索”	
                                                                    
                                                                    3、next	    右下角按钮为“下一个”	        微信、支付宝、百度小程序、快手小程序、京东小程序、app-nvue、app-vue和h5(2.9.9+，且要求设备webview内核Chrome81+、Safari13.7+)
                                                                    
                                                                    4、go	    右下角按钮为“前往”	
                                                                    
                                                                    5、done	    右下角按钮为“完成”	            微信、支付宝、百度小程序、快手小程序、京东小程序、app-nvue、app-vue和h5(2.9.9+，且要求设备webview内核Chrome81+、Safari13.7+)


                                                            ★、注意：

                                                                    ①、App平台的vue页面及H5平台的弹出键盘使用的是浏览控制的键盘，在Chrome81+、Safari13.7+之前，键盘右下角文字只能设置完成和搜索，

                                                                    从Chrome81+、Safari13.7+起支持设置发送、下一个。

                                                                    ②、App平台设计聊天的建议使用nvue,一方面因为 app-vue 控制键盘右下角按键文字为"发送"对 webview内核有要求，另一方面聊天记录如使用scroll-view,

                                                                        过长的内容自爱app-vue上会有性能问题

            
                                        <4>、inputmode 有效值

                                                            在符合条件的高版本webview里，uni-app 的web和 app-vue 平台中可使用本属性。

                                                                值	                        说明
                                                            1、none	            无虚拟键盘。在应用程序或者站点需要实现自己的键盘输入控件时很有用。

                                                            2、text	            使用用户本地区域设置的标准文本输入键盘。

                                                            3、decimal	        小数输入键盘，包含数字和分隔符（通常是“ . ”或者“ , ”），设备可能也可能不显示减号键。

                                                            4、numeric	        数字输入键盘，所需要的就是 0 到 9 的数字，设备可能也可能不显示减号键。

                                                            5、tel	            电话输入键盘，包含 0 到 9 的数字、星号（*）和井号（#）键。表单输入里面的电话输入通常应该使用 <input type="tel"> 。

                                                            6、search	        为搜索输入优化的虚拟键盘，比如，返回键可能被重新标记为“搜索”，也可能还有其他的优化。

                                                            7、email	        为邮件地址输入优化的虚拟键盘，通常包含"@"符号和其他优化。表单里面的邮件地址输入应该使用 <input type="email"> 。

                                                            8、url	            为网址输入优化的虚拟键盘，比如，“/”键会更加明显、历史记录访问等。表单里面的网址输入通常应该使用 <input type="url"> 。
            */


            /*
                四、App平台iOS 15端软键盘上方横条去除方案

                                app-vue 在 ios 上，webView中的软键盘弹出时，默认在软键盘上方有一个横条，显示这： 上一项、下一项和完成等按钮。

                                如不想显示这个横条，可以配置 softinputNavbar:'none'


                                配置方式，在 pages.json 中某个页面或全局配置 style

                                            "app-plus": {
                                                "softinputNavBar": "none"
                                            }

                                如需使用js动态设置  softinputNavBar

                                            this.$scope.$getAppWebview().setStyle({
                                                softinputNavBar: 'none'
                                            })
                                            //this.$scope.$getAppWebview()相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效

                                如果是nvue页面，ios默认就没有键盘上方的横条，无需任何设置。
            */

            /*
                五、关于软键盘弹出的逻辑说明

                                "adjus" (翻译： 调整)
                                            
                                App平台软键盘弹出有 adjustResize|adjustPan 两种模式，默认为 adjustPan 模式，小程序平台只支持 adjustPan 模式，H5平台因不同浏览器而异

                                    ①、adjustResize：软键盘弹出时，webview窗体高度挤压。屏幕高度=webview窗体高度+软键盘高度

                                    ②、adjustPan：软键盘弹出时，webview窗体高度不变，但窗体上推，以保证输入框不被软键盘盖住

                                配置方式，在pages.json 中配置style

                                            "app-plus": {
                                                "softinputMode": "adjustResize"
                                            }  
                                                
                                            
                                ★、注意

                                      ①、adjustResize模式在Android App上，弹起键盘和收回键盘时，因为要重设webview窗体高度，可能会在个别安卓机型闪现灰屏或漏出下层页面内容。

                                      ②、小程序端在 input 聚焦期间，避免使用 css 动画。

                                      ③、H5平台只能在用户交互时修改 focus 生效。

                                      ④、如果遇到 focus 属性设置不生效的问题参考：组件属性设置不生效解决办法 https://uniapp.dcloud.net.cn/tutorial/vue-api.html#componentsolutions

                                      ⑤、如需禁止点击其他位置收起键盘的默认行为，可以监听touch事件并使用prevent修饰符（仅支持App、H5，其他平台可以通过设置focus来使输入框重新获取焦点），
                                      
                                         例如在确认按钮上使用：@touchend.prevent="onTap"
            */

            /*
                六、关于软键盘收起的逻辑说明

                                 1、Android 上在软键盘弹出后，点击back或点击非置焦区域可收起软键盘

                                 2、ios上如果软键盘上方有带有 "完成" 的横条，则需要点完成才能收起键盘；如果没有软键盘上方横条，则点击非 input/textarea 区域即可收起软键盘

                            以上为默认逻辑，uni-app同时提供了隐藏软键盘的api：  uni.hideKeyboard() https://uniapp.dcloud.io/api/key?id=hidekeyboard
            */

            /*
                七、App平台原生输入框的说明

                            在app平台，有titleNView配置的 searchinput 原生输入框和 plus.nativeObj.view 的 drawinput.  

                            这两种方式的输入框都是原生的，不是 webview里的。

                                    ①、原生输入框在ios上不会有软键盘上方的横条

                                    ②、原生输入框一样受配置的 adjustPan|adjustResize模式影响
            */

            /*
                 八、示例

                          <template>
                                <view>
                                    <view class="uni-common-mt">
                                        <view class="uni-form-item uni-column">
                                            <view class="title">可自动聚焦的input</view>
                                            <input class="uni-input" focus placeholder="自动获得焦点" />
                                        </view>
                                        <view class="uni-form-item uni-column">
                                            <view class="title">键盘右下角按钮显示为搜索</view>
                                            <input class="uni-input" confirm-type="search" placeholder="键盘右下角按钮显示为搜索" />
                                        </view>
                                        <view class="uni-form-item uni-column">
                                            <view class="title">控制最大输入长度的input</view>
                                            <input class="uni-input" maxlength="10" placeholder="最大输入长度为10" />
                                        </view>
                                        <view class="uni-form-item uni-column">
                                            <view class="title">实时获取输入值：{{inputValue}}</view>
                                            <input class="uni-input" @input="onKeyInput" placeholder="输入同步到view中" />
                                        </view>
                                        <view class="uni-form-item uni-column">
                                            <view class="title">控制输入的input</view>
                                            <input class="uni-input" @input="replaceInput" v-model="changeValue" placeholder="连续的两个1会变成2" />
                                        </view>
                                        <!-- #ifndef MP-BAIDU --
                                        <view class="uni-form-item uni-column">
                                            <view class="title">控制键盘的input</view>
                                            <input class="uni-input" ref="input1" @input="hideKeyboard" placeholder="输入123自动收起键盘" />
                                        </view>
                                        <!-- #endif --
                                        <view class="uni-form-item uni-column">
                                            <view class="title">数字输入的input</view>
                                            <input class="uni-input" type="number" placeholder="这是一个数字输入框" />
                                        </view>
                                        <view class="uni-form-item uni-column">
                                            <view class="title">密码输入的input</view>
                                            <input class="uni-input" password type="text" placeholder="这是一个密码输入框" />
                                        </view>
                                        <view class="uni-form-item uni-column">
                                            <view class="title">带小数点的input</view>
                                            <input class="uni-input" type="digit" placeholder="带小数点的数字键盘" />
                                        </view>
                                        <view class="uni-form-item uni-column">
                                            <view class="title">身份证输入的input</view>
                                            <input class="uni-input" type="idcard" placeholder="身份证输入键盘" />
                                        </view>
                                        <view class="uni-form-item uni-column">
                                            <view class="title">控制占位符颜色的input</view>
                                            <input class="uni-input" placeholder-style="color:#F76260" placeholder="占位符字体是红色的" />
                                        </view>
                                <view class="uni-form-item uni-column">
                                            <view class="title"><text class="uni-form-item__title">带清除按钮的输入框</text></view>
                                            <view class="uni-input-wrapper">
                                                <input class="uni-input" placeholder="带清除按钮的输入框" :value="inputClearValue" @input="clearInput" />
                                                <text class="uni-icon" v-if="showClearIcon" @click="clearIcon">&#xe434;</text>
                                            </view>
                                        </view>
                                        <view class="uni-form-item uni-column">
                                            <view class="title"><text class="uni-form-item__title">可查看密码的输入框</text></view>
                                            <view class="uni-input-wrapper">
                                                <input class="uni-input" placeholder="请输入密码" :password="showPassword" />
                                                <text class="uni-icon" :class="[!showPassword ? 'uni-eye-active' : '']"
                                                    @click="changePassword">&#xe568;</text>
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </template>  
                            
                            <、script>
                                export default {
                                    data() {
                                        return {
                                            title: 'input',
                                            focus: false,
                                            inputValue: '',
                                            showClearIcon: false,
                                            inputClearValue: '',
                                            changeValue: '',
                                            showPassword: true
                                        }
                                    },
                                    methods: {
                                        onKeyInput: function(event) {
                                            this.inputValue = event.target.value
                                        },
                                        replaceInput: function(event) {
                                            var value = event.target.value;
                                            if (value === '11') {
                                                this.changeValue = '2';
                                            }
                                        },
                                        hideKeyboard: function(event) {
                                            if (event.target.value === '123') {
                                                uni.hideKeyboard();
                                            }
                                        },
                                        clearInput: function(event) {
                                            this.inputClearValue = event.detail.value;
                                            if (event.detail.value.length > 0) {
                                                this.showClearIcon = true;
                                            } else {
                                                this.showClearIcon = false;
                                            }
                                        },
                                        clearIcon: function() {
                                            this.inputClearValue = '';
                                            this.showClearIcon = false;
                                        },
                                        changePassword: function() {
                                            this.showPassword = !this.showPassword;
                                        }
                                    }
                                }
                            </、script>
            */

        </script>
    </body>
</html>